/**
* Created by wust on 2019/10/21.
*/
<template xmlns:v-data-dictionary-directive="http://www.w3.org/1999/xhtml">
  <el-form ref="addModel" :model="addModel" :rules="rules" label-width="200px" @submit.native.prevent>
    <el-form-item label="接收者类型" prop="receiverType">
      <select class="form-control" v-data-dictionary-directive:A1014  v-model="addModel.receiverType" @change="receiverTypeChange">
      </select>
    </el-form-item>
    <el-form-item label="指定接收者" style="text-align: left;">
      <el-cascader
        :disabled="receiverDisabledFlag"
        ref="myCascader"
        v-model="cascaderValue"
        :options="options"
        @change="handleChange"></el-cascader>
    </el-form-item>
    <el-form-item label="推送渠道" style="text-align: left;" prop="sendChannel">
      <el-checkbox-group v-model="sendChannels">
        <el-checkbox label="A101901">Web端</el-checkbox>
        <el-checkbox label="A101902">手机短信</el-checkbox>
        <el-checkbox label="A101903">微信公众号</el-checkbox>
        <el-checkbox label="A101904">手机App</el-checkbox>
        <el-checkbox label="A101905">电子邮件</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="优先级" prop="receiverType">
      <select class="form-control" v-data-dictionary-directive:A1016  v-model="addModel.priorityLevel">
      </select>
    </el-form-item>
    <el-form-item label="标题" prop="title">
      <el-input v-model="addModel.title"></el-input>
    </el-form-item>
    <el-form-item label="内容" prop="content">
      <quill-editor class="editor"
                    ref="myTextEditor"
                    v-model="addModel.content">
      </quill-editor>
    </el-form-item>
    <el-form-item style="text-align: left;">
      <el-button type="primary" @click="onSubmit('addModel')" :loading="submitting">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import Vue from 'vue'

export default {
  name: 'notification-create',
  data () {
    return {
      addModel: {
        title: '',
        content: '',
        sendChannel: '',
        receiverType: '',
        receiver: '',
        receiverLabel: '',
        priorityLevel: ''
      },
      rules: {
        sendChannel: [{required: true, message: '请选择推送渠道', trigger: 'blur'}],
        receiverType: [{required: true, message: '请选择接收者类型', trigger: 'blur'}],
        priorityLevel: [{required: true, message: '请选择优先级别', trigger: 'blur'}],
        title: [{required: true, message: '请输入标题', trigger: 'blur'}],
        content: [{required: true, message: '请输入内容', trigger: 'blur'}]
      },
      submitting: false,
      receiverDisabledFlag: true,
      options: [{value: '', label: 'No data'}],
      cascaderValue: '',
      sendChannels: []
    }
  },
  methods: {
    receiverTypeChange: function (evt) {
      let val = evt.target.value
      if (val === '') {
        this.receiverDisabledFlag = true
        this.addModel.receiver = ''
        this.cascaderValue = ''
      } else if (val === 'A101401') {
        this.receiverDisabledFlag = true
        this.cascaderValue = ''
      } else if (val === 'A101402') {
        this.receiverDisabledFlag = false
        this.buildReceiverCascader(val)
      } else if (val === 'A101403') {
        this.receiverDisabledFlag = false
        this.buildReceiverCascader(val)
      }
    },
    buildReceiverCascader: function (receiverType) {
      Vue.$ajax({
        method: 'get',
        url: Vue.$adminServerURL + '/web/NotificationController/buildReceiverCascader/' + receiverType
      }).then(res => {
        if (res.data.flag === 'SUCCESS') {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.obj)) {
            this.options = JSON.parse(res.data.obj)
          }
        } else {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        }
      })
    },
    handleChange: function (value) {
      this.addModel.receiver = value[value.length - 1]

      let receiverLabel = ''
      let labels = this.$refs.myCascader.getCheckedNodes()[0].pathLabels
      if (labels != null && labels.length > 0) {
        for (let i = 0; i < labels.length; i++) {
          receiverLabel += labels[i] + ' '
        }
        this.addModel.receiverLabel = receiverLabel
      }
    },
    onSubmit: function (formData) {
      this.addModel.sendChannel = ''
      for (let i = 0; i < this.sendChannels.length; i++) {
        this.addModel.sendChannel += this.sendChannels[i] + ','
      }

      this.$refs[formData].validate((valid) => {
        if (!valid) {
        } else {
          this.submitting = true
          Vue.$ajax({
            method: 'post',
            url: Vue.$adminServerURL + '/web/NotificationController',
            data: this.addModel
          }).then(res => {
            if (res.data.flag !== 'SUCCESS') {
              if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
                this.$message({
                  message: res.data.message,
                  type: 'warning'
                })
              }
            } else {
              this.$message({
                message: res.data.message,
                type: 'success'
              })
              this.resetForm('addModel')
            }
            this.submitting = false
          })
        }
      })
    },
    resetForm (formData) {
      this.$refs[formData].resetFields()
    }
  }
}
</script>
